﻿@{
    ViewBag.Title = "数据源表信息查看";
    Layout = "~/Views/Shared/_Main.cshtml";
}
@section Head{
    <style>
        .tb1
        {
            width: 160px;
            border: 1px;
            background: #99BBE8;
            line-height: 25px;
            font-weight: bold;
            color: #ffffff;
            padding-left: 10px;
            cursor: pointer;
        }
        .tb2
        {
            width: 160px;
            border: 1px;
            border-right: 1px solid #99BBE8;
            background: #eee;
            line-height: 25px;
            padding-left: 10px;
            cursor: pointer;
        }
        .pagTable td
        {
            padding-left: 3px;
        }
        #ViewSreach
        {
            display: none;
            width: 500px;
            height: 200px;
            position: absolute;
            top: 38px;
            left: 150px;
            z-index: 1002;
        }
        #sarea
        {
            background-color: #ffffff;
            border: #ccc 1px solid;
            height: 300px;
            overflow-y: scroll;
        }
        .dbItem
        {
            background-color: #ffffff;
            border: #ccc 1px solid;
            height: 25px;
            padding-left: 3px;
            padding-top: 8px;
            display: none;
        }
        #larea
        {
            background-color: #ffffff;
            border: #ccc 1px solid;
            height: 300px;
            overflow-y: scroll;
        }
    </style>
    <script type="text/javascript">
        var UrlArray = $.getUrlArray();
        var searchTab;
        var DBID = "";
        $(function () { 
            if (UrlArray["DBType"] == "2")
                $(".dbItem").show();
            initSourceTableData();
        });
        var shead = true;
        var lhead = true;
        var squery;
        var lquery;
        function initSourceTableData(sortField, sortBy) {
            searchTab = 1;
            $(".loading").show();
            $("#sarea").show();
            $("#larea").hide();
            $.ajax({
                type: "POST",
                url: "/GetDate/GetSourceTableData/",
                data: { systemID: UrlArray["systemID"], viewID: UrlArray["viewID"], DBID: DBID, dbName: encodeURI(UrlArray["dbName"]), order: sortField, sort: sortBy, query: squery },
                datatype: "text/plain",
                async: true,
                success: function (result) {
                    if (result.Success) {
                        $("#divSoutceTableData").html(result.Data);
                        if (shead) {
                            $("#sarea").html(result.Head);
                            shead = false;
                        }
                    }
                    else {
                        $("#divSoutceTableData").html(result.Message);
                    }
                    $(".loading").hide();
                }
            });
        }
        function initLocalTableData(sortField, sortBy) {
            searchTab = 2;
            $(".loading").show();
            $("#sarea").hide();
            $("#larea").show();
            $.ajax({
                type: "POST",
                url: "/SystemConfiguration/GetLocalTableData/",
                data: { systemID: UrlArray["systemID"], viewID: UrlArray["viewID"], dbName: encodeURI(UrlArray["dbName"]), order: sortField, sort: sortBy, query: lquery },
                datatype: "text/plain",
                async: true,
                success: function (result) {
                    if (result.Success) {
                        $("#divLocalTableData").html(result.Data);
                        if (lhead) {
                            $("#larea").html(result.Head);
                            lhead = false;
                        }
                    }
                    else {
                        $("#divLocalTableData").html(result.Message);
                    }
                    $(".loading").hide();
                }
            });
        }
        var getcmp = false;
        function GetCmpCloumnData() {
            if (!getcmp) {
                getcmp = true;
                $(".loading").show();
                $.ajax({
                    type: "POST",
                    url: "/SystemConfiguration/GetCmpCloumnData/",
                    data: { systemID: UrlArray["systemID"], viewID: UrlArray["viewID"], dbName: encodeURI(UrlArray["dbName"]) },
                    datatype: "text/plain",
                    async: true,
                    success: function (result) {
                        if (result.Success) {
                            $("#tbCmpCloumnData").append(result.Data);
                        }
                        else {
                            $("#msg3").html(result.Message);
                        }
                        $(".loading").hide();
                    }
                });
            }
        }
        function sreach() {
            var sr = [];
            var sid;
            if (searchTab == 1) {
                sid = "#sarea";
            }
            else {
                sid = "larea";
            }
            $(sid + " tr").each(function (i, d) {
                var nm = d.id;
                if ($(".sel_" + nm).val() == "") return;
                var arr = new Array();
                arr.push(nm);
                arr.push($(".sel_" + nm).val());
                arr.push($.trim($(".txt_" + nm).val()));
                arr.push($(".ctp_" + nm).val());
                sr.push(arr);
            });
            $('#ViewSreach').hide();
            $('#DIVMask').hide();
            if (searchTab == 1) {
                squery = $.toJSON(sr);
                initSourceTableData("", "");
            }
            else {
                lquery = $.toJSON(sr);
                initLocalTableData("", "");
            }
        }

        var viewsdb = true;
        function tab(v) {
            switch (v) {
                case 1:
                    initSourceTableData();
                    break;
                case 2:
                    initLocalTableData();
                    break;
                case 3:
                    GetCmpCloumnData();
                    break;
            }
            for (var i = 1; i <= 3; i++) {
                $("#dv" + i).removeClass();
                if (i == v) {
                    $("#tab" + i).show();
                    $("#dv" + i).addClass("tb1");
                } else {
                    $("#tab" + i).hide();
                    $("#dv" + i).addClass("tb2");
                }
            }
        }
        function GetDBList() {
            showModalMany('GetDBItem', '/SystemConfiguration/GetDBList?systemID=' + UrlArray["systemID"] + "&dbName=" + encodeURI(UrlArray["dbName"]), '750', '465', function (res) {
                DBID = res[0].GUID;
                $("#txt_Host").val(res[0].Host + "," + res[0].Description);
            });
        }
    </script>
}
<div style="margin: 5px; height: 460px;">
    <table class="searchArea" width="100%">
        <tr>
            <td width="160">
                <div id="dv1" class='tb1' onclick="tab(1)">
                    预览源数据信息</div>
            </td>
            <td width="160">
                <div id="dv2" class='tb2' onclick="tab(2)">
                    预览本地数据信息</div>
            </td>
            <td width="160">
                <div id="dv3" class='tb2' onclick="tab(3)">
                    查看结构对比</div>
            </td>
            <td>
            </td>
        </tr>
    </table>
    <div id="tab1">
        <table class="listTitle">
            <tbody>
                <tr>
                    <td width="15">
                        <img src="/images/edit.png">
                    </td>
                    <td width="300">
                        预览源数据信息
                    </td>
                    <td align="right">
                        <input type="button" class="button" value="搜索" onclick="$('#ViewSreach').show();$('#DIVMask').show();" />
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="divSoutceTableData" style="height: 390px; overflow-x: scroll;">
            <div class="loading">
                <img src="/Images/tree_loading.gif" />
            </div>
        </div>
        <div id="msg">
        </div>
    </div>
    <div id="tab2" style="display: none;">
        <table class="listTitle">
            <tbody>
                <tr>
                    <td width="15">
                        <img src="/images/edit.png">
                    </td>
                    <td width="100">
                        预览本地数据信息
                    </td>
                    <td align="right">
                        <input type="button" class="button" value="搜索" onclick="$('#ViewSreach').show();$('#DIVMask').show();" />
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="divLocalTableData" style="overflow-y: auto; height: 390px;">
            <table id="tbLocalTableData" class="pagTable" cellspacing="0" cellpadding="0">
            </table>
            <div class="loading">
                <img src="/Images/tree_loading.gif" />
            </div>
        </div>
        <div id="msg2">
        </div>
    </div>
    <div id="tab3" style="display: none;">
        <table class="listTitle">
            <tbody>
                <tr>
                    <td width="15">
                        <img src="/images/filesave.png">
                    </td>
                    <td width="300">
                        查看结构对比
                    </td>
                    <td align="right">
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="divCmpCloumnData" style="overflow-y: auto; height: 390px;">
            <table id="tbCmpCloumnData" class="pagTable" cellspacing="0" cellpadding="0">
                <tr>
                    <td>
                    </td>
                    <td colspan="2" align="center">
                        源系统表
                    </td>
                    <td colspan="2" align="center">
                        本地数据表
                    </td>
                </tr>
                <tr class="pagTablehd">
                    <td width="20%">
                        字段名称
                    </td>
                    <td width="20%">
                        字段类型
                    </td>
                    <td width="20%" align="center">
                        主键
                    </td>
                    <td width="20%">
                        字段类型
                    </td>
                    <td width="20%" align="center">
                        主键
                    </td>
                </tr>
            </table>
            <div id="msg3">
            </div>
            <div class="loading">
                <img src="/Images/tree_loading.gif" />
            </div>
        </div>
    </div>
</div>
<div id="ViewSreach">
    <table class="listTitle">
        <tbody>
            <tr>
                <td width="15">
                    <img src="/images/search.png">
                </td>
                <td width="260">
                    搜索数据信息
                </td>
                <td>
                    <input type="button" class="button" value="提交" onclick="sreach();" />
                    <input type="button" class="button" value="关闭" onclick="$('#ViewSreach').hide();$('#DIVMask').hide();" />
                </td>
            </tr>
        </tbody>
    </table>
    <div class="dbItem">
        选择连接数据库：<input type="text" id="txt_Host" style="width: 285px;" /><input type="button"
            class="button" value="选择" onclick="GetDBList();" />
    </div>
    <div id="sarea">
    </div>
    <div id="larea">
    </div>
</div>
<div id="DIVMask">
</div>
